<template>
  <view class="user-edit-page">
    <!-- 头像修改区域 -->
    <view class="avatar-section">
      <text class="section-title">头像</text>
      <button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar">
        <image class="avatar-img" :src="avatarUrl" mode="aspectFill" />
      </button>
      <text class="tip-text">点击修改头像（支持JPG/PNG）</text>
    </view>

    <!-- 昵称修改区域 -->
    <view class="nickname-section">
      <text class="section-title">昵称</text>
      <nut-input v-model="nickname" type="nickname" placeholder="请输入昵称" border @change="handleNicknameChange"
        :max-length="20" class="nickname-input" />
      <text class="tip-text">支持特殊符号和emoji表情</text>
    </view>

    <view class="nickname-section">
      <text class="section-title">真实姓名</text>
      <nut-input v-model="realname" type="text" placeholder="请输入真实姓名" border @change="handleRealnameChange"
        :max-length="20" class="nickname-input" />
      <text class="tip-text">支持特殊符号和emoji表情</text>
    </view>

    <!-- 提交按钮 -->
    <nut-button type="primary" block class="submit-btn" @click="handleSubmit">
      保存修改
    </nut-button>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Taro from '@tarojs/taro'
import { showToast, showLoading, hideLoading } from '@tarojs/taro'
// import { store } from '@/store/index'
import http from '@/utils/http';
import { useUserStore } from '@/stores/index'

const userStore = useUserStore()
console.log("userStore", userStore)

const defaultAvatar = userStore.info.avatar; // 默认头像

// 响应式数据
const avatarUrl = ref(defaultAvatar)
const nickname = ref(userStore.info.nickname || '未设置昵称')
const realname = ref(userStore.info.realname || '')

Taro.setNavigationBarTitle({
  title: "用户信息",
});

// 选择头像回调（微信官方规范）
const handleChooseAvatar = async (e: any) => {
  const res = await http.upload(e.detail.avatarUrl);
  console.log("res &&&", res)
  avatarUrl.value = res
}

// 昵称变更处理（兼容真机BUG）
const handleNicknameChange = (e) => {
  nickname.value = e.detail.value.trim().slice(0, 20)
}

// 真实姓名变更处理（兼容真机BUG）
const handleRealnameChange = (e) => {
  realname.value = e.detail.value.trim().slice(0, 20)
}

// 提交修改
const handleSubmit = async () => {
  if (!validateForm()) return

  const res = await userStore.doUpdateInfo({
    nickname: nickname.value,
    avatar: avatarUrl.value,
    realname: realname.value
  })
  console.log("res", res)
  if(res?.error === 0) {
    showToast({ title: '修改成功', icon: 'none' })
    setTimeout(() => {
      Taro.navigateBack()
    }, 1200)
  }
  else {
    showToast({ title: res?.msg || '修改失败', icon: 'none' })
  }
}

// 表单验证
const validateForm = (): boolean => {
  if (!nickname.value) {
    showToast({ title: '昵称不能为空', icon: 'none' })
    return false
  }

  if (nickname.value.length < 2) {
    showToast({ title: '昵称至少2个字符', icon: 'none' })
    return false
  }

  return true
}
</script>

<style lang="scss">
/* 750rpx设计稿基准 */
$design-width: 750rpx;

.user-edit-page {
  padding: 40rpx;
  background-color: #f8f9fb;
  min-height: 100vh;
  box-sizing: border-box;
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
}

.avatar-section {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);

  .avatar-btn {
    padding: 0;
    background: transparent;
    border: none;
    line-height: 1;

    &::after {
      border: none;
    }
  }
}

.nickname-section {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);

  .nut-input {
    margin: 20rpx 0 !important;
    padding: 0 !important;
  }

  .nickname-input {
    border-radius: 16rpx;
    overflow: hidden;
    width: 100%;
    display: flex;
    border: 2rpx solid #eee;
    padding: 0 20rpx;
    height: 100rpx;
    font-size: 32rpx;
  }
}

.tip-text {
  display: block;
  font-size: 26rpx;
  color: #999;
  margin-top: 20rpx;
}

.submit-btn {
  margin-top: 80rpx;
  height: 96rpx;
  border-radius: 48rpx;
  font-size: 34rpx;
  // background: linear-gradient(90deg, #ff5e3a, #ff2a6a);
  border: none;

  &:disabled {
    opacity: 0.6;
  }
}

.avatar-preview {
  width: 80vw;
  height: 80vw;
  max-width: 600rpx;
  max-height: 600rpx;
}

.confirm-btn {
  margin-top: 40rpx;
  width: 100%;
  border-radius: 48rpx;
  height: 88rpx;
}

.avatar-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: #999;
}

/* 响应式适配 */
@media (min-width: 600rpx) {
  .user-edit-page {
    padding: 60rpx;
  }
}
</style>
